<template>
	<div class='toc_IM_component_frame'>
		<div class='toc_IM_header' v-if ="showType=='other'">
			<span style='display: inline-block;position: absolute; left: 10px;' @click="close">
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span>
			{{headerTitle}}
		</div>
		<div class='viewer_container' v-if ="showType=='image'">
			<span class='viewer_btn' @click='close'>关闭</span>
			<mt-button size="small" class='viewer_btn' style='top: 20px; right: 10px;z-index: 2; position: absolute;' type="primary" v-if='allowSend' @click='sendImage'>发送</mt-button>
			<div id='pinchZoom' >
				<img v-bind:src='item.path' v-for='item in filesList'/>
			</div>
			
		</div>
		<div class="otherFilePreview" v-if ="showType=='other'">
			<iframe v-bind:src='commonFilePath' width="100%" height="100%" frameborder='0'></iframe>
		</div>
	</div>
	
</template>

<script>
	import units from '@/assets/scripts/units.js'
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import systemConst from '@/assets/scripts/systemConst.js'
	import PinchZoom from 'pinch-zoom-js/dist/pinch-zoom.umd.js'
	export default {
	  	name: 'viewer',
	  	props: ['componentsData'],
	  	data(){
		    return {
		    	headerTitle:'浏览',
		    	imgConfig:imgConfig,
		    	showType:null,
		    	SystemConst:systemConst,
		    	pinchZoomInstance:null,
		    	filesList:[],
		    	sendFileObj:null,
		    	allowSend:false,
		    	commonFilePath:null
		    }
		},
		mounted(){
			this.init()
		},
		methods:{
			close(data){
	  			this.$emit('emit-components',null);
		  	},
		  	sendImage(){
		  		this.$indicator.open({
				  	text: '正在上传文件',
				  	spinnerType: 'fading-circle'
				});
				units.OSSUpFile(this.sendFileObj,getFileInfo=>{
					this.$indicator.close();
					this.$emit('emit-components',{
						functionName:function(){
							this.sendMessage(getFileInfo,this.SystemConst.ChatMsgType.Image);
						}
					});
				});
		  	},
		  	init(){
		  		var ExReg = new RegExp(/\.[^\.]+$/, 'g');
		  		this.headerTitle=this.componentsData.headerTitle==undefined?'浏览':this.componentsData.headerTitle;
				this.filesList=this.componentsData.filesList;
				this.allowSend=this.componentsData.allowSend==undefined?false:this.componentsData.allowSend;
				this.sendFileObj=this.componentsData.sendFileObj==undefined?null:this.componentsData.sendFileObj;
				if(this.sendFileObj==null){
					//preview
					var extension =this.componentsData.filesList[0].path.match(ExReg);
					if(extension==".jpg"||extension==".jpeg"||extension==".gif"||extension==".png"){
						this.showType='image';
						setTimeout(()=>{
							let el = document.querySelector('#pinchZoom');
							this.pinchZoomInstance = new PinchZoom(el);
							this.pinchZoomInstance.enable();
						},200);	
					}else{
						this.showType='other';
						this.commonFilePath=this.componentsData.filesList[0].path
					};		
				}else{
					this.showType='image';
					setTimeout(()=>{
						let el = document.querySelector('#pinchZoom');
						this.pinchZoomInstance = new PinchZoom(el);
						this.pinchZoomInstance.enable();
					},200);	
				};
		  	}
		}
	}
</script>

<style>
	div.viewer_container{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,0.9);
	}
	div.viewer_container>span.viewer_btn{
		position: absolute;
		bottom:20px;
		color: #FFFFFF;
		right: 20px;
		cursor: pointer;
		font-size: 14px;
		z-index: 1;
	}
	div.otherFilePreview{
		background: #FFFFFF;
		width: 100%;
		position: relative;
		height: calc(100% - 50px);
		overflow: hidden;
	}
</style>